<template>
  <div>
    <el-button @click="dialogFormRef?.open()">open</el-button>
    <AdDialogForm v-bind="dialogConfig" ref="dialogFormRef" v-model="models"></AdDialogForm>
  </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';

import type { AdDialogFormInstance, AdDialogFormPorps } from '@fe-hl/admin-design-vue';

interface Models {
  keyword: string;
  mercId: string;
  status: string;
  startime: string;
  endtTme: string;
}
const dialogFormRef = ref<AdDialogFormInstance>();

const models = ref<Models>();
const dialogConfig = reactive<AdDialogFormPorps<Models>>({
  dialogProps: {
    title: '新增',
  },
  formPorps: {
    formProps: {
      labelWidth: '80px',
    },
    buttonsSpan: 24,
    buttonsPosition: 'end',
    components: [
      {
        model: 'keyword',
        components: 'el-input',
        props: {
          span: 12,
          label: '关键字',
          rules: [{ required: true, message: '请输入关键字', trigger: 'blur' }],
        },
      },
      {
        model: 'mercId',
        components: 'el-input',
        props: {
          span: 12,
          label: '商户号',
          rules: [{ required: true, message: '请输入商户号', trigger: 'blur' }],
        },
      },
      {
        model: 'orderID',
        components: 'el-input',
        props: {
          span: 24,
          label: '订单号',
          rules: [{ required: true, message: '请输入订单号', trigger: 'blur' }],
        },
      },
      {
        model: 'status',
        components: 'el-select',
        subComponents: 'el-option',
        options: [
          {
            label: '启用',
            value: '1',
          },
          {
            label: '禁用',
            value: '0',
          },
        ],
        props: {
          span: 24,
          label: '状态',
          rules: [{ required: true, message: '请选择状态', trigger: ['blur', 'change'] }],
        },
      },
      {
        model: 'daterange',
        components: 'el-date-picker',
        props: {
          span: 24,
          label: '创建时间',
          placeholder: '创建时间',
          type: 'daterange',
          startPlaceholder: '开始时间',
          rangeSeparator: '至',
          endPlaceholder: '结束时间',
          valueFormat: 'YYYY-MM-DD',
          rules: [{ required: true, message: '请选择时间', trigger: ['blur', 'change'] }],
        },
        events: {
          change: (value: Array<string> | null) => {
            if (value == null) {
              models.value!.startime = '';
              models.value!.endtTme = '';
            } else {
              models.value!.startime = value[0];
              models.value!.endtTme = value[0];
            }
          },
        },
      },
    ],
    submit: (models) => {
      // 模拟ajax请求
      console.log(models);
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve();
        }, 3000);
      });
    },
    resetForm: () => {
      console.log('resetForm');
    },
  },
});
</script>
